<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="dv">321</div>
    <div id="dv">321</div>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  //入口函数 能够将我们的变量变量变成私有变量 不污染全局 有点像window.onload 但比他快 只要页面的结构加载完毕 就会回调
  //jquery支持链式编程
  //选择器和h5中的document.querySelector基本一样
  //jQuery会暴露出两个全局变量
  //   一个是$
  //   另一个是jQuery
  $(function () {
    $(".dv").css("color", "red");
    $("#dv").css("color", "red");
    // $("li:first").css("font-size", "30px");
    // $("li:last").css("font-size", "30px");
    //eq很好用
    // $("li:eq(1)").css("font-size", "30px");
    // $("li:odd").css("font-size", "30px");
    $("li:even").css("font-size", "30px");
  });
</script>
